<template>
  <div>
    <div class="mhomenav">
      <div class="mtitle">管理员主页</div>

      <a-menu
        class="man-menu"
        v-model:selectedKeys="current"
        mode="horizontal"
        @select="selectMenu"
      >
        <a-sub-menu v-for="menu in menus" :key="menu.id">
          <template #title>
            {{ menu.name }}
          </template>
          <a-menu-item v-for="child in menu.children" :key="child.url">{{
            child.name
          }}</a-menu-item>
        </a-sub-menu>
      </a-menu>

      <div class="curr-manager">
        <!-- <a-avatar
          v-if="currImageUrl"
          @click="setAvatar"
          :src="currImageUrl"
          style="vertical-align: middle"
        />
        <span
          v-else
          @click="setAvatar"
          style="
            vertical-align: middle;
            font-size: 14px;
            color: #aa0000;
            cursor: pointer;
          "
          >设置头像</span
        > -->
        <a-dropdown placement="bottomCenter">
          <a style="color: #000; margin-left:20px" @click.prevent>
            {{ currentManager.m_name }} ({{ currentManager.m_id }})
            <DownOutlined />
          </a>
          <template #overlay>
            <a-menu>
              <a-menu-item>
                <a :href="'/'+currentManager.m_status+'/info'">个人信息</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;" @click="exit">退出系统</a>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </div>
    </div>
    <div style="padding: 30px;">
      <router-view></router-view>
    </div>
  </div>

  <!-- 设置头像弹框 -->
  <a-modal v-model:visible="visible" title="设置头像" @ok="execUpload">
    <a-upload
      list-type="picture-card"
      class="avatar-uploader"
      :show-upload-list="false"
      :before-upload="() => false"
      @change="handleChange"
    >
      <img v-if="imageUrl" :src="imageUrl" />
      <div v-else>
        <plus-outlined />
        <div class="ant-upload-text">选择头像</div>
      </div>
    </a-upload>
  </a-modal>
</template>

<script setup>
import { ref } from "vue";
import { useRouter,useRoute } from "vue-router";
import { get, del, post, getBlob, tip, removeLocalToken  } from "@/common";
import { DownOutlined, UserOutlined,PlusOutlined } from "@ant-design/icons-vue";

const current = ref(["mail"]);

const menus = ref([]);
const currentManager = ref([]);

const router = useRouter();
const selectMenu = ({ item, key, selectedKeys }) => {
  console.log(item, key, selectedKeys);
  router.push({ path: key });
};

const getMenus = () => {
  get("/security/m_home/menus").then((res) => {
    menus.value = res.data;
  });
};
const getCurrManager = () => {
  get("/security/m_home/currentManager").then((res) => {
    currentManager.value = res.data;
    getAvatar();
  });
};



const exit = () => {
  del("/security/m_home/exit").then((res) => {
    removeLocalToken();
    router.push("/m_login");
  });
};

getMenus();
getCurrManager();

const currImageUrl = ref("");
const getAvatar = () => {
  if (!currentManager.value || !currentManager.value.m_avatar) {
    return;
  }
  getBlob(
    "/security/m_home/avatar/" + currentManager.value.m_avatar,
    {},
    { loading: false }
  ).then((blob) => {
    const reader = new FileReader();
    reader.addEventListener("load", () => {
      currImageUrl.value = reader.result;
    });
    reader.readAsDataURL(blob);
  });
};

//头像上传

const avatarFile = ref(null);
const imageUrl = ref("");
const visible = ref(false);

const setAvatar = () => {
  visible.value = true;
};

//选择头像
const handleChange = (info) => {
  avatarFile.value = info.file;
  const reader = new FileReader();
  reader.addEventListener("load", () => {
    imageUrl.value = reader.result;
  });
  reader.readAsDataURL(info.file);
};

//执行上传
const execUpload = () => {
  if (!avatarFile.value) {
    tip.error("请选择头像！");
    return;
  }
  const formData = new FormData();
  formData.append("avatar", avatarFile.value);
  post("/security/m_home/avatar", formData).then((res) => {
    tip.success("头像设置成功！");
    visible.value = false;
    getCurrManager();
  });
};
</script>

<style>
.mhomenav {
  height: 50px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: row;
  position: relative;

  box-shadow: 0px 1px 5px 5px rgba(0, 0, 0, 0.05);
}

.mtitle {
  text-align: center;
  width: 120px;
  position: absolute;
  left: 20px;
  bottom: 15px;
}

.man-menu {
  align-content: center;
  height: 100%;
  text-align: center; /*文字居中*/
  position: absolute;

  left: 200px;
  flex: auto; /*z作为flex容器内元素自动扩展占位*/
}

.curr-manager {
  position: absolute;
  right: 20px;
  bottom: 5px;

  display: flex;
  flex-direction: row;
  align-items: center; /*交叉轴居中*/

  flex: auto;
  text-align: center;
}


/* 上传头像样式 */
.avatar-uploader {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
.avatar-uploader > .ant-upload {
  width: 300px;
  height: 300px;
}
.avatar-uploader img {
  max-width: 300px;
  max-height: 300px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>


